<template>
    <div class="detail">
        <detail-nav-bar class="detail-nav-bar" ref="nav" @titleClick="titleClick"></detail-nav-bar>
        <scroll class="content" ref="scroll"  @scroll="contentScroll">
            <detail-swiper :top-images="topImages"></detail-swiper>
            <detail-base-info :goods="goods"></detail-base-info>
            <detail-shop-info :shop="shop"></detail-shop-info>
            <detail-goods-info :detail-info="detailInfo" @imageLoad="imageLoad"></detail-goods-info>
            <detail-param-info ref="params" :param-info="paramInfo"></detail-param-info>
            <detail-comment-info ref="comment" :comment-info="commentInfo"></detail-comment-info>
            <goods-list  :goods="recommends" ref="recommend"></goods-list>
        </scroll>
        <detail-bottom-bar></detail-bottom-bar>
        <!--{{iid}}-->
    </div>
</template>

<script>
    import DetailNavBar from './childComps/DetailNavBar'
    import DetailSwiper from "./childComps/DetailSwiper";
    import DetailBaseInfo from "./childComps/DetailBaseInfo";
    import DetailShopInfo from "./childComps/DetailShopInfo";
    import DetailGoodsInfo from "./childComps/DetailGoodsInfo";
    import DetailParamInfo from "./childComps/DetailParamInfo";
    import DetailCommentInfo from "./childComps/DetailCommentInfo";

    import Scroll from "components/common/scroll/Scroll";
    import GoodsList from "components/content/goods/GoodsList";

    import {getDetail,Goods,Shop,GoodsParam,
    getRecommend} from "network/api/detail";
    import {debounce} from "common/utils";
    import {itemListerMixin} from "common/mixin";
    import DetailBottomBar from "./childComps/DetailBottomBar";

    export default {
        name: "Detail",
        data() {
            return {
                iid:null,
                topImages:[],
                goods:{},
                shop:{},
                detailInfo:{},
                paramInfo:{},
                commentInfo:{},
                recommends:[],
                themeTopYs:[],//保存详情页四个主题部分的offsetTop
                debounceGetThemeTopY:null,
                currentIndex:0,
                abc:null
            }
        },
        created() {
            console.log('created');
            this.getIId()

            this.getDetail()
            this.getRecommend()
            // this.debounceGetThemeTopY = this.$nextTick(()=>{
            //     console.log(123);
                this.debounceGetThemeTopY=debounce(()=>{
                // debounce(()=>{
                    this.themeTopYs=[]
                    this.themeTopYs.push(0);
                    this.themeTopYs.push(this.$refs.params.$el.offsetTop);
                    this.themeTopYs.push(this.$refs.comment.$el.offsetTop);
                    this.themeTopYs.push(this.$refs.recommend.$el.offsetTop);
                    this.themeTopYs.push(Number.MAX_VALUE); //手动在末尾添加一个最大值，避免下面滚动内容联动标题时的判断不那么复杂
                    console.log(this.$refs.params.$el.offsetTop);
                },100)

        },
        mounted() {

        },
        mixins:[itemListerMixin],
        // watch:{
        //     "$route":"getIId"
        // },
        components:{
            DetailBottomBar,
            GoodsList,
            DetailCommentInfo,
            DetailParamInfo,
            DetailGoodsInfo,
            Scroll,
            DetailShopInfo,
            DetailBaseInfo,
            DetailSwiper,
            DetailNavBar
        },
        methods:{
            getIId() {
                this.iid = this.$route.params.iid
            },
            getDetail() {
                getDetail(this.iid).then(res=>{
                    // console.log(res);
                    const data = res.result
                    this.topImages = data.itemInfo.topImages

                    //获取商品信息
                    this.goods = new Goods(data.itemInfo,data.columns,data.shopInfo.services)
                    //获取店铺信息
                    this.shop = new Shop(data.shopInfo)
                    //获取商品详情数据
                    this.detailInfo = data.detailInfo
                    //获取商品参数
                    this.paramInfo = new GoodsParam(data.itemParams.info,data.itemParams.rule)
                    // console.log(this.goodsParam);
                    //获取评论
                    if (data.rate.cRate != 0) {
                        this.commentInfo = data.rate.list[0]
                    }

                })
            },
            //获取商品推荐
            getRecommend(){
                getRecommend().then(res => {
                    this.recommends = res.data.list
                })
            },
            imageLoad() {
                this.$refs.detailScroll.refresh()
                this.debounceGetThemeTopY()
            },
            contentScroll(position) {
                //1.获取滚动元素已滚动的高度
                const positionY = -position.y
                //2.positionY和主题中的值进行对比 [0, 3234, 4079, 4369]
                // positionY在 0    和 3234 之间，index=0
                // positionY在 3234 和 4079 之间，index=1
                // positionY在 4079 和 4369 之间，index=2
                // positionY超过       4369 以上，index=3
                for(var i=0,len=this.themeTopYs.length;i<len-1;i++){
                    if(this.currentIndex !=i && (i<len-1 && positionY>=this.themeTopYs[i] && positionY<this.themeTopYs[i+1])){
                        this.currentIndex=i;
                        this.$refs.nav.currentIndex=this.currentIndex
                    }
                }
            },
            getOffsetTop() {
                this.themeTopYs=[]
                this.themeTopYs.push(0);
                this.themeTopYs.push(this.$refs.params.$el.offsetTop);
                this.themeTopYs.push(this.$refs.comment.$el.offsetTop);
                this.themeTopYs.push(this.$refs.recommend.$el.offsetTop);
                this.themeTopYs.push(Number.MAX_VALUE); //手动在末尾添加一个最大值，避免下面滚动内容联动标题时的判断不那么复杂
                console.log(this.themeTopYs);
            },
            titleClick(index) {
                console.log(index);
                this.$refs.scroll.scrollTo(0,-this.themeTopYs[index],200)
            }
        }
    }
</script>

<style scoped>
    .detail {
        height: 100vh;
        position: relative;
        z-index: 9;
        background-color: #fff;
    }
    .detail-nav-bar {
        position: relative;
        z-index: 9;
        background-color: #fff;
    }
    .content {
        height: calc(100% - 44px - 49px);
        overflow: hidden;
    }
</style>